<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <style>
    .node{
        /*z-index: 20;*/
        position: absolute;
        cursor: pointer;
        text-align: center;
        color: black;
    }

    .node-border {
        box-shadow: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        opacity: 0.8;
        filter: alpha(opacity=80);
        border: 1px solid #346789;
        background-color: #eeeeef;
    }

    .node-event {
        width:45px;
        padding: 10px;
        font-size: 9pt;
        cursor: pointer;
        height:65px;
        line-height: 30px;
        padding: 10px 0px;
    }

    .node-task {
        width:105px;
        padding: 10px;
        font-size: 9pt;
        cursor: pointer;
        height:65px;
        line-height: 25px;
        padding: 10px 0px;
        text-align: center;
    }

    .node .node-pic {
        display: block;
    }

    .designer-wrapper {
        padding: 0 20px;
    }

    .designer-wrapper .designer-tool {
        padding: 0px;
    }

    .designer-wrapper .designer-center {
        padding: 0px;
    }

    .designer-panel{
        min-height: 492px;
    }

    .jtk-drag {
        outline: 4px solid pink !important;
    }

    .node-select {
        /*outline: 4px solid blue !important;
        border: 2px solid blue;*/
        background-color: #F39814;
    }

    .node:hover{
        border: 2px solid blue;
    }

    .endpointHide{
        display: none;
    }

    .src-node {
        text-align:center;
        margin: 0 auto;
        margin-top: 15px;
        cursor: pointer;
        color: black;
    }

    /**流程设计区域网格显示*/
    #canvasPanel {
        background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%),linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
        background-size: 10px 10px;
    }

    /**连线点*/
    .ep {
        width: 10px; 
        height: 10px; 
        position: absolute;
        left: calc(100% - 5px); 
        top: calc(50% - 5px);
        cursor: pointer; 
        border-radius: 10px;
        background-color: rgb(153, 68, 102);
        z-index:100;
        display: none;
    }

    /*节点上的删除图标样式**/
    .delete {
        width: 14px; 
        height: 14px; 
        position: absolute;
        left: calc(100% - 7px); 
        top: -7px;
        border-radius: 10px;
        border: 1px solid #ed5565;
        text-align: center;
        line-height: 12px;
        display: none;
    }

	
  </style>

<!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://at.alicdn.com/t/font_1088215_lk1fnbovp2.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">

    


  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/metisMenu/1.1.2/jquery.metisMenu.min.js"></script>
  <script src="https://cdn.bootcss.com/jsPlumb/2.9.0/js/jsplumb.min.js"></script>
  <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

  
  
  <title>jsplumb</title>
 </head>
 <body>

 <div class="designer-wrapper animated fadeIn">
    <div class="row">
        <div class="col-sm-2 designer-tool">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    <span class="fa fa-wrench fa-lg"></span> 工具
                </div>
                <div class="panel-body  designer-panel">
                    <div id="toolPanel" class="designer-panel" style="position: absolute;width: 100%;left: 0px;top:40px;scroll:auto;" >
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-10 designer-center">
            <div class="panel panel-info">
                <div class="panel-heading" style="padding-top: 7.5px;padding-bottom: 7.5px;">
                    <div class="btn-group-xs">
                        <i id="showTool" class="fa fa-bars" style="margin-right: 10px;"></i>
                        <a id="clearCanvas" class="btn btn-danger btn-xs">
                            <i class="fa fa-trash-o"></i> 清空
                        </a>
                        <a class="btn btn-primary btn-edit btn-xs " >
                            <i class="fa fa-edit"></i> 模板导入
                        </a>
                        <a class="btn btn-info btn-del btn-xs "  >
                            <i class="fa fa-paper-plane"></i> 任务发布
                        </a>
                        <a class="btn  btn-xs "  >
                            <input id="file" type="file" style="display: inline;" />
                        </a>
                        
                    </div>
                </div>
                <div  class="panel-body designer-panel" >
                    <div id="canvasPanel" class="designer-panel pre-scrollable" style="position: absolute;width: 100%;left: 0px;top:40px;" >
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    /**定义可拖拽图标列表*/
        //开始
    var $start = $("<div name='start' class='node-border node-event'><i class='fa fa-play-circle-o fa-2x node-pic' style='color:#1ab394;'></i>开始</div>"),
        //定时
        $timer = $("<div name='timer' class='node-border node-event'><i class='fa fa-clock-o fa-2x node-pic' style='color:#1ab394;'> </i>定时</div>"),
        //任务
        $serviceTask = $("<div name='serviceTask'  class='node-border node-task'><i class='iconfont icon-task node-pic' style='color:#1c84c6;'></i><span>任务</span></div>"),
        //并行网关
        $parallelgateway = $("<div name='parallelgateway' ><i class='iconfont icon-parallelgateway  node-pic' style='font-size:38px;color:#23c6c8;'> </i></div>"),
        //互斥网关
        $exclusivegateway = $("<div name='exclusivegateway' ><i class='iconfont icon-exclusivegateway node-pic' style='font-size:38px;color:#f8ac59;'></i></div>"),
        //结束
        $end = $("<div name='end'  class='node-border node-event'><i class='fa fa-pause-circle-o fa-2x node-pic' style='color:#ed5565;'> </i>结束</div>"); 

    // this is the paint style for the connecting lines..
    var connectorPaintStyle = {
        strokeWidth: 2,
        stroke: "#61B7CF",
        joinstyle: "round",
        outlineStroke: "white",
        outlineWidth: 2
    },
    // .. and this is the hover style.
    connectorHoverStyle = {
        strokeWidth: 3,
        stroke: "#216477",
        outlineWidth: 5,
        outlineStroke: "white"
    };

    var endpoint = {
        anchor:"Continuous",
        connector: [ "Flowchart", { stub: [1, 1], gap: 1, cornerRadius: 5, alwaysRespectStubs: true} ],
        connectorStyle: connectorPaintStyle,
        connectorHoverStyle: connectorHoverStyle,
        dragOptions: { },
        overlays: [
            [ "Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel",
                visible:false
            } ]
        ]
    };

    var sourceEndpoint= $.extend({},{filter:".ep"},endpoint),
        targetEndpoint={
            dropOptions:{ hoverClass:"dragHover" },
            allowLoopback:true,
            anchor:"Continuous"
        };

    class Node {
        /**
        * canvasPanel: 画板对象

       
        top    必须
        left   必须

        以下2选一
        node  页面显示div
        bpmnNode  bpmn规范的xml节点
        无需
        id  
        name

        */
        constructor(options){
            if(options.bpmnNode){
                this.id = options.bpmnNode.attr("id");
                this.name = options.bpmnNode.attr("name");

            }else {
                this.id = options.node.attr("id");
                this.name = options.node.attr("name");
            }
            this.top = options.top;
            this.left = options.left;
            this.dom =  options.node.append($("<div class='ep'></div>")) //设置连线点
                     .append("<div class='delete'><i class='fa fa-close' style='color:#ed5565;'></i></div>")//设置删除图标
                     .css("left", this.left+"px").css("top", this.top+"px").css("z-index",0).css("font-weight","bold");
            
            
        }

        getBpmnNode(){
            var $bpmnNode;
            switch(this.name){
                case "start":
                     $bpmnNode = $("<startEvent></startEvent>").attr("name","开始事件");
                    break;
                case "end":
                     $bpmnNode = $("<endEvent></endEvent>").attr("name","结束事件");;
                    break;
                case "timer":
                     $node = $("<startEvent></startEvent>").attr("name","定时事件");;
                    break;
                case "serviceTask":
                     $node = $("<serviceTask></serviceTask>").attr("activiti:async","true").attr("activiti:exclusive","false").attr("name",this.dom.find("span").text());
                    break;
            }

            $bpmnNode.attr("id",this.id);
        }

        draw($canvasPanel){
            //画图
            var $node = this.dom;
            //绑定jsplumb
            if(this.name==="start" || this.name==="timer"){
                $canvasPanel.append($node);
                jsPlumb.makeSource($node,sourceEndpoint);
            }else if(this.name==="end"){
                $canvasPanel.append($node);
                jsPlumb.makeTarget($node,targetEndpoint);
            }else {
                $canvasPanel.append($node);
                jsPlumb.makeSource($node,sourceEndpoint);
                jsPlumb.makeTarget($node,targetEndpoint);
            }
            
            jsPlumb.draggable(this.id,{
                containment:$canvasPanel,
                //grid: [10, 10], //网格
                filter:".ep",
                scroll:true

            });
        }

    }

    

    class Event extends Node {
        constructor(top,left,type){
            var $node;
            switch(type){
                case "start":
                     $node = $startEvent;
                    break;
                case "end":
                     $node = $endEvent;
                    break;
                case "timer":
                     $node = $timerEvent;
                    break;
            }
            super(top,left,$node);
        }
    }

    /*流程定义*/
    class definitions {
        constructor(process,bPMNDiagram){
            this.process = process;
        }
    }

    class Process {
        constructor(id,name,documentation){
            this.id = id;
            this.name = name;
            this.documentation = documentation;
            this.nodes = new Array();
        }

        addNode(node){
            this.nodes.push(node);
        }

        getProcess(){
            var $process = $("<process></process>");
            $process.attr("id",this.id).attr("name",this.name);
            $process.append($("<documentation>"+this.documentation+"</documentation>"));
            debugger;
            for(var i=0;i<this.nodes.length;i++){
                $process.append(this.nodes[i].$node);
            }
            return $process;
        }
    }

    class BPMNDiagram {
        constructor(id){
            this.id = id;
        }

    }


    /*
     连线
    */

    class SequenceFlow {
        //<sequenceFlow id="sequenceFlow65" name="" sourceRef="serviceTask166" targetRef="serviceTask33"/>
        constructor(options){
            if(options.bpmnNode){
                this.id = options.bpmnNode.attr("id");
                this.sourceRef = options.bpmnNode.attr("sourceRef");
                this.targetRef = options.bpmnNode.attr("targetRef");
            }else {
                this.id = options.id;
                this.sourceRef = options.sourceRef;
                this.targetRef = options.targetRef;
            }
        }

        getBpmnNode(){
            return $("<sequenceFlow></sequenceFlow>").attr("id",this.id).attr("sourceRef",this.sourceRef).attr("targetRef",this.targetRef);
        }

        draw(){
            jsPlumb.connect({
                        source: this.sourceRef,
                        target: this.targetRef});
        }
    } 

    $(function () {
        //封装
        $.extend({
            // 弹出层封装处理
            modal: {
                // 显示图标
                icon: function(type) {
                    var icon = "";
                    if (type == modal_status.WARNING) {
                        icon = 0;
                    } else if (type == modal_status.SUCCESS) {
                        icon = 1;
                    } else if (type == modal_status.FAIL) {
                        icon = 2;
                    } else {
                        icon = 3;
                    }
                    return icon;
                },
                // 消息提示
                msg: function(content, type) {
                    if (type != undefined) {
                        layer.msg(content, { icon: $.modal.icon(type), time: 1000, shift: 5 });
                    } else {
                        layer.msg(content);
                    }
                },
                // 错误消息
                msgError: function(content) {
                    $.modal.msg(content, modal_status.FAIL);
                },
                // 成功消息
                msgSuccess: function(content) {
                    $.modal.msg(content, modal_status.SUCCESS);
                },
                // 警告消息
                msgWarning: function(content) {
                    $.modal.msg(content, modal_status.WARNING);
                },
                // 弹出提示
                alert: function(content, type) {
                    layer.alert(content, {
                        icon: $.modal.icon(type),
                        title: "系统提示",
                        btn: ['确认'],
                        btnclass: ['btn btn-primary'],
                    });
                },
                // 消息提示并刷新父窗体
                msgReload: function(msg, type) {
                    layer.msg(msg, {
                            icon: $.modal.icon(type),
                            time: 500,
                            shade: [0.1, '#8F8F8F']
                        },
                        function() {
                            $.modal.reload();
                        });
                },
                // 错误提示
                alertError: function(content) {
                    $.modal.alert(content, modal_status.FAIL);
                },
                // 成功提示
                alertSuccess: function(content) {
                    $.modal.alert(content, modal_status.SUCCESS);
                },
                // 警告提示
                alertWarning: function(content) {
                    $.modal.alert(content, modal_status.WARNING);
                },
                // 关闭窗体
                close: function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                },
                // 关闭全部窗体
                closeAll: function () {
                    layer.closeAll();
                },
                // 确认窗体
                confirm: function (content, callBack) {
                    layer.confirm(content, {
                        icon: 3,
                        title: "系统提示",
                        btn: ['确认', '取消'],
                        btnclass: ['btn btn-primary', 'btn btn-danger'],
                    }, function (index) {
                        layer.close(index);
                        callBack(true);
                    });
                }
            }
        });

        /** 弹窗状态码 */
        modal_status = {
            SUCCESS: "success",
            FAIL: "error",
            WARNING: "warning"
        };

        var idIndex = 100;

        var $canvasPanel = $( "#canvasPanel");

         

        $("#toolPanel").append($start).append($timer).append($serviceTask).append($parallelgateway).append($exclusivegateway).append($end);

        $("#toolPanel").children("div").addClass("src-node");

        $("#toolPanel").find("i").css({"display":"block"});

        $(".src-node").draggable({ 
            appendTo:"body",
            scroll:true,
            revert:true,
            start:function(event,ui){
                $(this).draggable('option','cursor','not-allowed');
            },
            stop:function(event,ui){
                $(this).draggable('option','cursor','move');
            },
            helper: function(){
                //克隆节点并且加上连线点、删除图标
                return $(this).clone().removeClass("src-node").addClass("node")/*.append($("<div class='ep'></div>")).append("<div class='delete'><i class='fa fa-close' style='color:#ed5565;'></i></div>")*/[0];
            },
            scope: "ss",zIndex:99 
        });


        jsPlumb.importDefaults({
            // default drag options
            DragOptions: { cursor: 'pointer', zIndex: 2000 },
            // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
            // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
            ConnectionOverlays: [
                [ "Arrow", {//箭头？
                    location: 1,
                    visible:true,
                    width:11,
                    length:11,
                    id:"ARROW",
                    events:{
                        click:function() { console.log("you clicked on the arrow overlay")}
                    }
                } ],
                [ "Label", {
                    location: 0.5,
                    id: "label",
                    cssClass: "aLabel",
                    events:{
                        tap:function() { console.log("you clicked on the label overlay"); }
                    }
                }]
            ],
            EndpointStyle : { display:"none"},
            Container: "canvasPanel"
        });

        
            
        function modalAlert(content,type){
            layer.alert(content, {
                icon: type,
                title: "系统提示",
                btn: ['确认'],
                btnclass: ['btn btn-primary'],
            });
        }

        $( "#canvasPanel" ).droppable({
            scope: "ss",
            drop: function( event, ui ) {
                var left = parseInt(ui.offset.left - $(this).offset().left);
                var top = parseInt(ui.offset.top - $(this).offset().top);
                ///var $node = $(ui.helper).clone().css("left", left).css("top", top).css("z-index",0).css("font-weight","bold");
                idIndex++;
                var thisId = name+idIndex;
                var $node = $(ui.helper).clone().attr("id",thisId);
                var node = new Node({"top":top,"left":left,"node":$node});
                //jsPlumbNode(node.dom);
                node.draw($canvasPanel);

            }
        });

        function jsPlumbNode($node){
            var name = $node.attr("name");
            var thisId = $node.attr("id");

            
            /**
            if(!thisId){
                if(name==="start" || name==="timer" || name==="end"){
                thisId = name;
                }else {
                    idIndex++;
                    thisId = name+idIndex;
                }                
                $node.attr("id",thisId);
            }**/
            
            if(name==="start" || name==="timer"){
                if ($('#timer').length >0 || $('#start').length >0) {
                    $.modal.alertError("开始或定时节点只能存在一个");
                    return;
                }
                $canvasPanel.append($node);
                jsPlumb.makeSource($node,sourceEndpoint);
            }else if(name==="end"){
                if ($('#end').length >0 ) {
                    $.modal.alertError("只能存在一个结束节点","error");
                    return;
                }
                $canvasPanel.append($node);
                jsPlumb.makeTarget($node,targetEndpoint);
            }else {
                $canvasPanel.append($node);
                jsPlumb.makeSource($node,sourceEndpoint);
                jsPlumb.makeTarget($node,targetEndpoint);
            }
            
            jsPlumb.draggable(thisId,{
                containment:"canvasPanel",
                //grid: [10, 10], //网格
                filter:".ep",
                scroll:true

            });
        }

        function createNode($node,left,top){
            $node.css("left", left+"px").css("top", top+"px").css("z-index",0).css("font-weight","bold");
            $canvasPanel.append($node);
            jsPlumbNode($node);
        }

        //隐藏或显示左侧工具面板
        $("#showTool").click(function () {
            $(".designer-tool").toggle('slow');
            $(".designer-center").toggleClass('col-sm-10');
        });

        //鼠标移入节点内事件，显示连线图标
        $("#canvasPanel").on("mouseenter", ".node", function () {
            $(this).find(".ep").show();//显示连线点
            $(this).find(".delete").show();//显示删除图标
        });

        //鼠标移出节点内事件，隐藏连线图标
        $("#canvasPanel").on("mouseleave", ".node", function () {
            //jsPlumb.selectEndpoints({source:$(this).attr("id")}).addClass("endpointHide");
            $(this).find(".ep").hide();//隐藏连线点
            $(this).find(".delete").hide();//隐藏删除图标
        });

        //删除节点
        $("#canvasPanel").on("click", ".delete",function () {
            var $this = $(this);
            $.modal.confirm('确定要删除该节点吗',function(){
                jsPlumb.removeAllEndpoints($this.parent().attr("id"));
                $this.parent().remove();
            });
        });

        //节点点击选中效果
        $("#canvasPanel").on("click", ".node", function () {
            $(this).addClass("node-select").siblings('.node').removeClass('node-select');
        });

        //双击修改任务名称
        $("#canvasPanel").on("dblclick", "span", function () {
            var $this = $(this);
            layer.prompt({title: '任务名称', formType: 2, value: $this.text(),maxlength: 10}, function(text, index){
                layer.close(index);
                $this.text(text);
              });
            return false;
        });

        //节点双击事件。点开配置详细信息
        $("#canvasPanel").on("dblclick", ".node", function () {
            layer.open({
                title: '任务详情',
                type: 1,
                maxmin: true,
                skin: 'layui-layer-rim', //加上边框
                content: "等着做吧",
                anim: 4,
                success: function(layero, index){
                   
                },
                end:function () {
                    
                }
            });
        });

        $("#clearCanvas").click(function(){
            $.modal.confirm('确定要清空画布吗',function(){
                $canvasPanel.find(".delete").each(function(){
                    jsPlumb.removeAllEndpoints($(this).parent().attr("id"));
                    $(this).parent().remove();
                });
            });
        });

        $('#file').change(function () {
  

            $.get(URL.createObjectURL($(this)[0].files[0]), {},function(result){
                console.log(result);

                //$("#clearCanvas").click();

                var $xml = $(result);

                var $setting = $("<div></div>");

                var shapes = $xml[0].getElementsByTagNameNS("http://www.omg.org/spec/BPMN/20100524/DI","BPMNShape");
                for(var i=0;i<shapes.length;i++){
                    var shape = shapes[i];
                    //var bounds = shape.getElementsByTagNameNS("http://www.omg.org/spec/DD/20100524/DC","Bounds")[0];
                    var bounds = shape.children[0];
                    var position = {
                        id:$(shape).attr("bpmnElement"),
                        x:$(bounds).attr("x"),
                        y:$(bounds).attr("y")
                    };

                    $setting.data($(shape).attr("bpmnElement"),position);
                }

                console.log($setting.data());
               
                $xml.find("process").find("serviceTask,startEvent,endEvent,parallelGateway,exclusiveGateway").each(function(index, ele){
                    //debugger;
                    var id = $(this).attr("id");

                    var $thisNode;
                    switch ($(this).prop("tagName")) {
                        case "startEvent":
                            $thisNode = $start.clone();
                            break;
                        case "endEvent":
                            $thisNode = $end.clone();
                            break;
                        case "serviceTask":
                             $thisNode = $serviceTask.clone();
                             $thisNode.find('span').text($(this).attr("name"));
                            break;
                        case "exclusiveGateway":
                             $thisNode = $exclusivegateway.clone();
                            break;
                        case "parallelGateway":
                             $thisNode = $parallelgateway.clone();
                            break;
                    }
                    $thisNode.addClass("node").attr("id",id);
                    var position = $setting.data(id);

                    var node = new Node({"top":position.y,"left":position.x,"bpmnNode":$(this),"node":$thisNode});

                    node.draw($canvasPanel);
                });
                
                 /*
                $xml.find("serviceTask").each(function(index, ele){
                    var id = $(this).attr("id");
                    var $thisNode = $serviceTask.clone().addClass("node").attr("id",id);
                    $thisNode.find("span").text($(this).attr("name"));
                    
                    var position = $setting.data(id);

                    //var node = new Node({"top":position.y,"left":position.x,"bpmnNode":$thisNode});
                    var node = new Node({"top":position.y,"left":position.x,"bpmnNode":$(this),"node":$thisNode});

                    node.draw($canvasPanel);

                    //createNode($thisNode,position.x,position.y);
                });


                $xml.find("startEvent").each(function(index, ele){
                    var id = $(this).attr("id");
                    var $thisNode = $start.clone().addClass("node").append($("<div class='ep'></div>")).append("<div class='delete'><i class='fa fa-close' style='color:#ed5565;'></i></div>").attr("id",id);
                    var position = $setting.data(id);
                    ///debugger;
                    createNode($thisNode,position.x,position.y);
                });

                $xml.find("endEvent").each(function(index, ele){
                    console.log($(this).attr("id")+"---"+$(this).attr("name"));
                    var id = $(this).attr("id");
                    var $thisNode = $end.clone().addClass("node").append($("<div class='ep'></div>")).append("<div class='delete'><i class='fa fa-close' style='color:#ed5565;'></i></div>").attr("id",id);
                    
                    var position = $setting.data(id);
                    ///debugger;
                    createNode($thisNode,position.x,position.y);
                });

                
                $xml.find("parallelGateway").each(function(index, ele){
                    console.log($(this).attr("id")+"---"+$(this).attr("name"));
                    var id = $(this).attr("id");
                    var $thisNode = $parallelgateway.clone().addClass("node").append($("<div class='ep'></div>")).append("<div class='delete'><i class='fa fa-close' style='color:#ed5565;'></i></div>").attr("id",id);
                    var position = $setting.data(id);
                    ///debugger;
                    createNode($thisNode,position.x,position.y);
                });

                */

                //画线sequenceFlow
                $xml.find("sequenceFlow").each(function(index, ele){
                    var sequenceFlow = new SequenceFlow({"bpmnNode":$(this)});
                    sequenceFlow.draw();
                });


                /**
                layer.open({
                    title: '任务详情',
                    type: 1,
                    maxmin: true,
                    skin: 'layui-layer-rim', //加上边框
                    content: result,
                    anim: 4,
                    success: function(layero, index){
                       
                    },
                    end:function () {
                        
                    }
                });
                **/
              },"xml");
            
        });

        // 双击修改连线描述, 
        jsPlumb.bind('dblclick', function (conn, originalEvent) {
            var $this = $(this);
            layer.prompt({title: '连线名称', formType: 2, value: conn.getOverlay("label").getLabel(),maxlength: 20}, function(text, index){
                layer.close(index);
                conn.getOverlay("label").setLabel(text);
            });
            /**
            $.modal.confirm('确定删除所点击的链接吗？',function(){
                //jsPlumb.deleteConnection(conn);
            });**/
        });

        jsPlumb.bind("connection", function (connInfo, originalEvent) {
            if (connInfo.connection.sourceId === connInfo.connection.targetId) { 
                jsPlumb.deleteConnection(connInfo.connection);
                $.modal.alertError("不能连接自己！");  
            }else{      
               console.log("连接"+connInfo.connection.sourceId+"==="+connInfo.connection.targetId);      
            }      
        });

        jsPlumb.bind("connectionDrag", function (connection) {
            console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
        });

        jsPlumb.bind("connectionDragStop", function (connection) {
            console.log("connection " + connection.id + " was dragged");
        });

        jsPlumb.bind("connectionMoved", function (params) {
            //console.log("connection " + params.connection.id + " was moved");
        });

        
        

        /*
        var Node = function(id,name,top,left,$node){
            this.id = id;
            this.name = name;
            this.top = top;
            this.left = left;
            this.$node =  function(){
                 $node.addClass("node")
                 .append($("<div class='ep'></div>")) //设置连线点
                 .append("<div class='delete'><i class='fa fa-close' style='color:#ed5565;'></i></div>") //设置删除图标
                 .attr("id",this.id); //设置ID值
                $node.css("left", left+"px").css("top", top+"px").css("z-index",0).css("font-weight","bold");
                return $node;
            }
        }

        var ServiceTask = function(id,name,top,left){
            var $node = $serviceTask.clone();
            $node.find("span").text(name);
            Node.call(this, id,name,top,left,$node);
        }*/





    });


    /*
    *1、 id   
     2、 name
     3、 top
     4、 left
    *
    definitions
       process
            startEvent
            serviceTask
                extensionElements
                    activiti:field
                        activiti:string

       bpmndi:BPMNDiagram
            bpmndi:BPMNPlane
                bpmndi:BPMNShape
                    omgdc:Bounds
    */

    function createDef(){
        var $definitions = $("<definitions></definitions>");
        $definitions.attr("xmlns","http://www.omg.org/spec/BPMN/20100524/MODEL");
        $definitions.attr("xmlns:xsi","http://www.w3.org/2001/XMLSchema-instance");
        $definitions.attr("xmlns:xsd","http://www.w3.org/2001/XMLSchema");
        $definitions.attr("xmlns:activiti","http://activiti.org/bpmn");
        $definitions.attr("xmlns:bpmndi","http://www.omg.org/spec/BPMN/20100524/DI");
        $definitions.attr("xmlns:omgdc","http://www.omg.org/spec/DD/20100524/DC");
        $definitions.attr("xmlns:omgdi","http://www.omg.org/spec/DD/20100524/DI");
        $definitions.attr("typeLanguage","http://www.w3.org/2001/XMLSchema");
        $definitions.attr("expressionLanguage","http://www.w3.org/1999/XPath");
        $definitions.attr("targetNamespace","http://www.activiti.org/ras");





    }



    
    

</script>

 </body>
</html>
